<template>
    <basic-container>
        <div class="wel">
            <basic-block v-for="(item,index) in menus"
                         :width="width"
                         :height="height"
                         @click="click(item)"
                         icon="el-icon-s-custom"
                         :text="item.name"
                         time="20"
                         dept=""
                         :color="getBackgroundColor(index) ">
            </basic-block>
        </div>
    </basic-container>
</template>

<script>

import {getStore, setStore} from '@/utils/store'

export default {
    data() {
        return {
            width: 300,
            height: 120,
            uri: {
                findTree: "/api/admin/sys/loginUser/menu/tree"
            },
            menus: [],
            colors: ['#d74e2a', '#009bad', '#603bbc', '#209bdf', '#0098a9', '#e31462', '#2e8aef', '#da542e', '#d56259']
        }
    },
    // mounted() {
    created() {
        this.crud.get(this.uri.findTree, {disable: 0, isLoginUser: true, isNextAll: true}).then((res => {
            let menus = res.data.data;
            let newMenus = [];
            this.getMenusNext(menus, newMenus)
            this.menus = newMenus;
        }))
    },
    methods: {
        // 递归获取自己 + 自己的下级ids
        getMenusNext(menus, newMenus) {
            for (let i = 0; i < menus.length; i++) {
                if (menus[i].root === 3) {
                    newMenus.push(menus[i]);
                }
                if (menus[i].menus !== null) {
                    this.getMenusNext(menus[i].menus, newMenus);
                }
            }
        },
        // 根据索引 获取背景颜色
        getBackgroundColor(index) {
            return this.colors[((index) % 9)]
        },
        click(item) {
            // 判断是否是 / 开头 (https 和 http 开头使用iframe 打开)
            let isIframe = (item.url.indexOf("http://") !== -1 || item.url.indexOf("https://") !== -1);
            if (isIframe) {
                // 跳iframe
                this.$router.push({
                    path: "/iframe",
                    query: {url: item.url}
                });
            } else {
                // 路由跳转
                this.$router.push({
                    path: item.url,
                    query: item.query
                });
            }
        }
    }
}
</script>

<style lang="scss">
.wel {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}
</style>
